<template>
	<view class="main_body">
		<view>
			<!-- 商品列表 -->
			<view class="shopList">
				<!-- <view class="shopList_title">
					<view>
						<image style="width: 30rpx;height: 30rpx;margin-right: 16rpx;" src="@/static/img2/ico-8.png"
							mode="" />
						<span class="course">精选课程</span>
					</view> -->
				<!-- <view><span class="more">更多</span>
						<image style="width: 16rpx;height: 16rpx;margin-left: 16rpx;"
							src="https://img2.baidu.com/it/u=1229947238,3197261640&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
							mode="" />
					</view> -->
				<!-- </view> -->
				<!-- 列表 -->
				<view>
					<!-- 每一个 -->
					<view class="list_eve" v-for="(item,index) in docusList" :key="index" @tap="goDetail(item.id);">
						<u--image :showLoading="true" width="120px" height="60px" src="/static/logo.png"
							style="margin-right: 30rpx;" radius="6"></u--image>
						<view class="list_eve_right">
							<view class="right_top">{{item.title}}</view>
							<view class="right_bom">
								<span>文章 | {{item.view}}人看过</span>
								<p>华天贝学院<span style="margin-left: 20rpx;">{{item.update_time}}</span></p>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				docusList: [],
				loadingType: 'more',
			}
		},

		onLoad(options) {
			// console.log(options);
			// this.getSlides();
			this.getDocus(options.name);
		},
		methods: {
			// 二楼bannar图接口
			async getSlides() {
				let res = await this.$myRequest({
					url: '/slides'
				})
				// console.log(res.data.data)
				let data = res.data.data;
				data.slideList.forEach(item =>
					// console.log(item),
					this.icons.push(item.icon),
				)
				this.news = res.data.data.documentInfo.title

			},

			async getDocus(name) {
				let res = await this.$myRequest({
					url: '/documentLists',
					data: {
						name: name
					}
				})

				// console.log(res)
				this.docusList = res.data.data
				this.loadingType = 'nomore'
			},

			async goPackages() {
				uni.navigateTo({
					url: '/pages/user/packages'
				})
			},

			async goDetail(id) {
				uni.navigateTo({
					url: '/pages/docs/detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.main_body {
		background-color: #f7f7f7;
	}

	.navigation {
		background-color: #ffffff;
		margin: 20rpx 0;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.navigation_eve {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.navigation_eve span {
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.shopList {
		padding: 0 30rpx;
		background-color: #ffffff;
	}

	.shopList_title {
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.shopList_title view {
		display: flex;
		align-items: center;
	}

	.course {
		font-size: 30rpx;
		font-weight: bold;
	}

	.more {
		font-size: 20rpx;
		color: #9b9b9b;
	}

	.list_eve {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #e5e5e5;
		display: flex;

	}

	.list_eve_right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.right_top {
		font-size: 30rpx;
	}

	.right_bom {
		display: flex;
		flex-direction: column;
	}

	.right_bom span {
		font-size: 26rpx;
		color: #6c6c6c;
	}

	.right_bom p {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #444;
	}
</style>